<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div class="container">
        <div class="control">
              <button>选项1</button>
              <button>选项2</button>
              <button>选项3</button>
        </div>
        <div class="content">
              <div class="box">内容1</div>
              <div class="box">内容2</div>
              <div class="box">内容3</div>
        </div>
  </div>
  <script>
           // 构造函数实例写入按钮和内容区   
         // 这是按钮选择;
      //    这是内容区的选择
         // 当前显示的内容下标;
            // 绑定事件的功能
    function Selector(btn_seletor,box_seletor){
        this.btns=document.querySelectorAll(btn_seletor);
        this.boxs=document.querySelectorAll(box_seletor);
        this.index=0;
        this.bindEvent();
    }
    // self.boxs[i].index=0?boxs[i].style.display='block':boxs[i].style.display='none';
      // 事件绑定功能; 
            // 1. 找到元素绑定事件; 
            // this => 实例对象;
            // console.log(self.btns);
                  // 在dom对象上记录当前的数据;
                       // this => DOM 
                       // this.index 
                       // console.log(this.index);
                       // 把btn的index赋值给实例对象的index     
                       // 调用切换内容功能函数   
            Selector.prototype.bindEvent=function(){
                var self = this;
               
                for(var i = 0 ;i<self.btns.length;i++){
                    self.btns[i].index=i;
                    self.btns[i].onclick=function(){
                        self.index=this.index;
                        self.changeContent();
                    }
                }
                self.changeContent();
            }
            Selector.prototype.changeContent=function(){
                var self = this;
                
                for(var i =  0 ;i <self.boxs.length;i++ ){
                  
                   self.boxs[i].style.display='none';
                }
                self.boxs[self.index].style.display='block';
            }
            var son =new Selector('.control button','.box')
      // 切换内容功能;
            // this => self √ dom?
            // 1. 隐藏所有;(排他思想)
                //   先把所有的内容隐藏
            // 显示点击按钮时候的对应的内容
    //   引入数据

  </script>
</body>
</html>